<template>
	<div class="userMessage-container">
		<p class="title">客户信息</p>
		<template v-for="item in customerData">
			<div class="customer-info" :key="item" v-if="item.role">
				<div class="rowop">
					<span>角色:</span>
					<i>{{ item.role || '- -' }}</i>
				</div>
				<div class="rowop" v-for="v in item.value" :key="v">
					<!-- {{ v }} -->
					<span>{{ v.name || '- -' }}:</span>
					<i>{{ v.value || '- -' }}</i>
				</div>
			</div>
		</template>
		<div class="business-box">
			<p class="business-title">业务信息</p>
			<div class="business-info" v-for="item in businessData" :key="item">
				<div class="rowop">
					<span>{{ item.name || '- -' }}:</span>
					<i>{{ item.value || '- -' }}</i>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getSessionAllVariables } from '../../api/api';
export default {
	props: {
		sessionId: {
			type: String,
			require: true,
			default: () => ''
		}
	},
	data() {
		return {
			// 客户信息数据
			customerData: [],
			// 业务信息
			businessData: []
		};
	},
	mounted() {
		this.initAllVariables();
	},
	methods: {
		async initAllVariables() {
			try {
				const { data } = await getSessionAllVariables(this.sessionId);
				this.customerData = data.data.filter(item => item && item.roleId !== null);
				console.warn(this.businessData, 'businessData');
				let newArray = [];
				let keys = this.customerData.map(item => {
					return item.roleId;
				});
				keys = [...new Set(keys)];
				keys.forEach((id, index) => {
					const resp = this.customerData.filter(item => item.roleId === id);
					newArray = [...newArray, { role: this.customerData.find(item => item.roleId === id)?.roleName, value: resp }];
					if (index + 1 === keys.length) {
						this.customerData = newArray;
						console.log(this.customerData, 'initAllVariables');
					}
				});
				this.businessData = data.data.filter(item => item && item.roleId === null);
				console.log(this.businessData, 'businessData');
			} catch (err) {
				console.log(err);
				this.$message.error('获取场景列表失败！');
			}
		},
		/** 数组转对象
		 * @param {Object} e 原始数组
		 * @param {Object} key 键
		 * @param {Object} val 值
		 */
		arrTransferObj(e, key, val) {
			return e.reduce((obj, item) => {
				obj[item[key]] = item[val];
				return obj;
			}, {});
		}
	}
};
</script>

<style scoped lang="less">
.userMessage-container {
	.title {
		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		padding: 24px 0 0px 5px;
	}
	.customer-info {
		width: 100%;
		background: #fbfbfb;
		border: 1px solid #f3f3f3;
		border-radius: 4px;
		margin: 12px 0;
		padding-bottom: 14px;
		.rowop {
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: flex-start;
			align-items: center;
			margin-top: 10px;
			span {
				// width: 58px;
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #606266;
				margin-left: 16px;
			}
			i {
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #606266;
				text-align: left;
				font-style: normal;
				margin-left: 15px;
			}
		}
	}
	.business-box {
		margin-top: 19px;
		.business-title {
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 5px;
			padding-bottom: 14px;
		}
		.business-info {
			width: 100%;
			background: #fbfbfb;
			border-radius: 4px;
			// border: 1px solid #f3f3f3;
			// margin: 12px 0;
			// padding-bottom: 14px;
			.rowop {
				// display: flex;
				// flex-direction: row;
				// width: 100%;
				// justify-content: flex-start;
				// align-items: center;
				padding-bottom: 8px;
				span {
					// width: 58px;
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #606266;
					margin-left: 16px;
				}
				i {
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #606266;
					text-align: left;
					font-style: normal;
					margin-left: 15px;
				}
			}
		}
	}
}
</style>
